<template>
    <!-- 马佳乐 成就管理 -->
    <div>
        <el-button @click="saveAchievementWindows()"> 添加</el-button>
        <el-table :data="AchievementData" stripe style="width: 100%" :header-cell-class-name="'headerBg'">
            <el-table-column
            prop="achievementName"
            label="成就名称">
            </el-table-column>
            <el-table-column label="成就图片" width="" align="center">
            <template slot-scope="scope">
              <el-image style="width: 120px; height: 70px" :src="
                  'http://101.43.223.224:8765/image/getImageById?id=' + scope.row.imageName">
              </el-image>
            </template>
          </el-table-column>
            <el-table-column
            prop="achievementDescription"
            label="成就描述">
            </el-table-column>
            <el-table-column
            prop="achievementPoints"
            label="奖励积分">
            </el-table-column>
            <!-- <el-table-column
            prop="achievementCondition"
            label="达成条件">
            </el-table-column> -->
            <!-- <el-table-column
            prop="achievementStatus"
            label="上架/下架">
            </el-table-column> -->
            <el-table-column
            prop="createTime"
            label="添加时间">
            </el-table-column>
            <el-table-column fixed="right" label="操作" width="360" align="center">
                <template slot-scope="scope">
                    <!-- <el-button @click="upUserWindows(scope.row)" type="primary" size="small">编辑</el-button>
                    <el-button @click="updatedelete(scope.row.id)" type="danger" size="small">删除</el-button> -->
                    <el-button type="primary" size="small" style="background:none;border:0px"><span style="color:#409EFF;" @click="updataAchievementWindows(scope.row)"><i class="el-icon-edit"></i>修改</span></el-button>
                  <el-button @click="updateDeletes(scope.row.id)" type="primary" size="small" slot="reference" style="background:none;border:0px"><span style="color:#409EFF;"><i class="el-icon-delete"></i>删除</span></el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="page.pageNum"
        :page-sizes="[5, 10, 20, 30, 40]"
        :page-size="page.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="page.totalSize"
        background >
        </el-pagination>
        

        <!-- 添加成就弹窗 -->
        <el-dialog title="添加成就" :visible.sync="addAchievement" width="25%">
            <el-upload style="padding-left: 20px"
                class="avatar-uploader"
                action="http://127.0.0.1:16000/ImageFile/addImageFile"
                :show-file-list="false"
                :on-success="handleAvatarSuccess"
                :before-upload="beforeAvatarUpload">
                <img v-if="imageUrl" :src="imageUrl" class="avatar">
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
            <!-- 添加表单 -->
            <el-form :model="AchievementForm" ref="Achievement" :rules="rules" label-width="100px">
                <el-form-item label="成就名称" prop="achievementName">
                <el-input v-model="AchievementForm.achievementName" style="width: 200px;"></el-input>
              </el-form-item>
              <el-form-item label="成就描述" prop="achievementDescription">
                <el-input
                  type="textarea"
                  :autosize="{ minRows: 2, maxRows: 4}"
                  placeholder="请输入成就描述"
                  v-model="AchievementForm.achievementDescription" style="width: 200px;">
                </el-input>
                <!-- <el-input v-model="PictureIdiomQuestionForm.pictureIdiomSource"></el-input> -->
              </el-form-item>
              <el-form-item label="奖励积分" prop="achievementPoints">
                <el-input v-model="AchievementForm.achievementPoints" style="width: 200px;"></el-input>
              </el-form-item>
              <!-- <el-form-item label="达成条件" prop="achievementCondition">
                <el-input v-model="AchievementForm.achievementCondition" style="width: 200px;"></el-input>
              </el-form-item> -->
            </el-form>
            <div style="height:10px;margin-right: 20px;">
            <div style="float:right;">
              <el-button style="background-color: rgb(234, 244, 255); color: rgb(96, 169, 255)" @click="saveAchievement()">确 定</el-button>
              <el-button @click="addAchievement = false" style="background-color: rgb(234, 244, 255); color: rgb(96, 169, 255)">取 消</el-button>
            </div>  
          </div>
        </el-dialog>

        <!-- 修改成就弹窗 -->
        <el-dialog title="添加成就" :visible.sync="updataAchievement" width="25%">
            <el-upload style="padding-left: 20px"
                class="avatar-uploader"
                action="http://127.0.0.1:16000/ImageFile/addImageFile"
                :show-file-list="false"
                :on-success="handleAvatarSuccess"
                :before-upload="beforeAvatarUpload">
                <img v-if="imageUrl" :src="imageUrl" class="avatar">
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
            <!-- 修改表单 -->
            <el-form :model="updataAchievementForm" ref="Achievement" :rules="rules" label-width="100px">
                <el-form-item label="成就名称" prop="achievementName">
                <el-input v-model="updataAchievementForm.achievementName" style="width: 200px;"></el-input>
              </el-form-item>
              <el-form-item label="成就描述" prop="achievementDescription">
                <el-input
                  type="textarea"
                  :autosize="{ minRows: 2, maxRows: 4}"
                  placeholder="请输入成就描述"
                  v-model="updataAchievementForm.achievementDescription" style="width: 200px;">
                </el-input>
                <!-- <el-input v-model="PictureIdiomQuestionForm.pictureIdiomSource"></el-input> -->
              </el-form-item>
              <el-form-item label="奖励积分" prop="achievementPoints">
                <el-input v-model="updataAchievementForm.achievementPoints" style="width: 200px;"></el-input>
              </el-form-item>
              <!-- <el-form-item label="达成条件" prop="achievementCondition">
                <el-input v-model="updataAchievementForm.achievementCondition" style="width: 200px;"></el-input>
              </el-form-item> -->
            </el-form>
            <div style="height:10px;margin-right: 20px;">
            <div style="float:right;">
              <el-button style="background-color: rgb(234, 244, 255); color: rgb(96, 169, 255)" @click="updataAchievementss()">确 定</el-button>
              <el-button @click="updataAchievement = false" style="background-color: rgb(234, 244, 255); color: rgb(96, 169, 255)">取 消</el-button>
            </div>  
          </div>
        </el-dialog>
    </div>
</template>

<script>
export default {
    data () {
        return {
            imageUrl:'',
            file: null,
            // 全查数据
            AchievementData: [],
            // 分页
            page: {
                totalSize: 0,
                pageNum: 1,
                pageSize: 10
            },
            // 添加窗口处于关闭状态
            addAchievement: false,
            // 添加成就数据
            AchievementForm: [],
            // 修改窗口处于关闭状态
            updataAchievement: false,
            updataAchievementForm: [],
            // 表单校验
            rules: {
                achievementName: [
                { required: true, message: "请输入成就名称", trigger: "blur" },
              ],
              achievementDescription: [
                { required: true, message: "请输入成就描述", trigger: "blur" },
              ],
              achievementPoints: [
                { required: true, message: "请输入奖励积分", trigger: "blur" },
              ],
              achievementCondition: [
                { required: true, message: "请输入达成条件", trigger: "blur" },
              ],
            }
        }
    },
    mounted () {
        // 全查成就
        this.getAchievement()
    },
    methods: {
        // 成语删除
        updateDeletes (id) {
            this.$confirm('是否删除该用户信息', '提示', {
                confirmButtonClass: '确定',
                cancelButtonText: '取消',
                type: 'waning'
            }).then(() => {
                this.$axios.delete('/achievement/deleteAchievement', {
                params: {
                    id: id
                }
                }).then(res => {
                if (res.data.flag) {
                    this.getAchievement()
                    this.$message({ message: '删除成功!', type: 'success' })
                } else {
                    this.Mymessage('waning', '删除失败!')
                }
                }).catch(res => {
                this.Mymessage('error', '删除失败,请联系管理员')
                })
            }).catch(() => {
                this.Mymessage('info', '已取消删除')
            })
        },
        // 修改成语
        updataAchievementss () {
          debugger
          const form = new FormData()
            // 图片
            if (this.file) {
                form.append("file",this.file)
            }
            // console.log("数据： " + file)
            form.set('id', this.updataAchievementForm.id)
            // 成就名字
            form.set('achievementName', this.updataAchievementForm.achievementName)
            // 成就描述
            form.set('achievementDescription', this.updataAchievementForm.achievementDescription)
            // 奖励积分
            form.set('achievementPoints', this.updataAchievementForm.achievementPoints)
            // 达成条件
            // form.set('achievementCondition', this.updataAchievementForm.achievementCondition)
          this.$axios.put('/achievement/updateAchievement',form).then(res => {
                if (res.data.flag) {
                    this.Mymessage('success', '恭喜您，操作成功')
                    this.updataAchievement = false
                    this.getAchievement()
                } else {
                    this.Mymessage('waning', '很抱歉，操作失败')
                }
            }).catch(err => {
                console.log(err)
            })
        },
        // 用户表修改弹窗
        updataAchievementWindows (data) {
            this.updataAchievementForm = JSON.parse(JSON.stringify(data))
            // this.UserLoginNameRole = this.userupdateForm.userLoginName
            this.updataAchievement = true
            this.imageUrl = 'http://101.43.223.224:8765/image/getImageById?id=' + data.imageName
        },
        // 全查成就方法
        getAchievement () {
            this.$axios.get('/achievement/queryAchievement' ,{
                params: {
                    // 当前页
                    pageNum: this.page.pageNum,
                    // 每页条数
                    pageSize: this.page.pageSize
                }
            }).then(res => {
                if (res.data.flag) {
                    this.AchievementData = res.data.data.content
                    this.page.totalSize = res.data.data.totalSize
                }
                this.loading = false
            }).catch(err => {
                this.Mymessage('error', err)
            })
        },
        // 分页
        handleSizeChange (val) { 
            this.page.pageSize = val
            this.getAchievement()
        },
        // 分页
        handleCurrentChange (val) { 
            this.page.pageNum = val
            this.getAchievement()
        },
        // 弹窗提示
        Mymessage (type, text) { 
            this.$message({
                showClose: true,
                message: text,
                type: type
            })
        },
        // 添加成就
        saveAchievement () {
            const form = new FormData()
            // 图片
            if (this.file) {
                form.append("file",this.file)
            }
            // form.set('id', this.AchievementForm.id)
            // 成就名字
            form.set('achievementName', this.AchievementForm.achievementName)
            // 成就描述
            form.set('achievementDescription', this.AchievementForm.achievementDescription)
            // 奖励积分
            form.set('achievementPoints', this.AchievementForm.achievementPoints)
            // 达成条件
            // form.set('achievementCondition', this.AchievementForm.achievementCondition)
            // if (this.file != null) {
            //     form.set('file', this.file, this.file.name)
            // }
            this.$axios.post('/achievement/addAchievement', form).then(res => {
                if (res.data.flag) {
                    this.Mymessage('success', res.data.data)
                    this.addAchievement = false
                    this.getAchievement()
                } else{
                    this.Mymessage('waning', '操作失败')
                }
            })
        },
        // 添加方法
        saveAchievementWindows () {
            this.AchievementForm = {}
            this.addAchievement = ''
            this.imageUrl = null
        },
        // 图片上传
        handleAvatarSuccess (res, file) { // 上传成功后的回调函数
            // this.imageUrl = URL.createObjectURL(file.raw);
        },
        beforeAvatarUpload (file) { // 上传之前的图片校验
            const isJPG = file.type === 'image/jpeg'
            const isLt2M = file.size / 1024 / 1024 < 2

            if (!isJPG) {
                this.$message.error('上传头像图片只能是 JPG 格式!')
                return false
            }
            if (!isLt2M) {
                this.$message.error('上传头像图片大小不能超过 2MB!')
                return false
            }
            this.imageUrl = URL.createObjectURL(file)
            this.file = file
            return false
        }
    }
}
</script>

<style>
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
  .headerBg {
  background: #f8f8f9 !important;
}
</style>